<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <title>WebSocket-Client</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        body { padding-top: 20px; }
    </style>
</head>
<body>
<div class="container" id="ws-chat" @keyup.ctrl.enter="ws_send">
    <div class="row">
        <div class="col-sm-offset-2 col-sm-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">公共频道&nbsp;&nbsp;&nbsp;<small>{{ `当前在线人数${online}` }}</small></h3>
                </div>
                <div class="panel-body" style="height: 400px; overflow-x:hidden; overflow-y:scroll">
                    <ul class="media-list" id="chat-content-list">
                        <li class="media" v-for="message in messages">
                            <div v-if="message.from === sock_id">
                                <div class="media-body">
                                    <h6 class="media-heading text-right"  v-text="message.from"></h6>
                                    <div class="pull-right" style="max-width: 80%;">
                                        <p class="bg-primary" v-text="message.msg" style="padding: 10px; margin: 0; white-space: pre-line; border-radius: 5px; word-break:break-all;"></p>
                                    </div>
                                </div>
                                <div class="media-right">
                                    <a><img style="width: 20px; height: 20px;" src=""></a>
                                </div>
                            </div>
                            <div v-else>
                                <div class="media-left">
                                    <a><img style="width: 20px; height: 20px;" src=""></a>
                                </div>
                                <div class="media-body">
                                    <h6 class="media-heading text-left"  v-text="message.from"></h6>
                                    <div class="pull-left" style="max-width: 80%;">
                                        <p class="bg-info" v-text="message.msg" style="padding: 10px; margin: 0; white-space: pre-line; border-radius: 5px; word-break:break-all;"></p>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="panel-footer" style="background: #fff; padding: 0px;">
                    <div class="form-group" style="margin: 0;">
                        <textarea class="form-control" rows="3" v-model="content"></textarea>
                    </div>
                    <div class="list-group" style="margin: 0;">
                        <a href="javascript:void(0)" class="list-group-item text-center" @click="ws_send">Send</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
$(function(){
    new Vue({
        el: '#ws-chat',
        data(){
            return{
                sock_id: '',
                content: '',
                online: 0,
                messages: [],
            }
        },
        mounted(){
            this.ws = new WebSocket("ws://127.0.0.1:8868/ws/chat");
            this.ws.onmessage = (ev) => {
                json_data = JSON.parse(ev.data);
                if (json_data.sock_id) {  // 获取唯一sock_id
                    this.sock_id = json_data.sock_id;
                } else if (json_data.online) {  // 更新当前在线人数
                    this.online = json_data.online;
                } else if (json_data.from) {
                    this.messages.push(json_data);  // 推送聊天消息至容器，交由Vue更新DOM
                    $('#chat-content-list').parent().animate({
                        scrollTop: $('#chat-content-list').height()
                    }, 1000);
                }
            };
            this.ws.onclose = (ev) => {
                this.messages.push({from: 'WebSocket', msg: 'WebSocket后台服务已关闭!'});
            };
            this.ws.onopen = (ev) => {
                this.messages.push({from: 'WebSocket', msg: '欢迎来到WebSocket聊天室！'});
                this.ws.send(JSON.stringify({'start': true}));
            };
        },
        methods: {
            ws_send: function(){
                if (this.content) {
                    this.ws.send(JSON.stringify({msg: this.content}));
                    this.content = '';
                }
            },
        },
    });
})
</script>
</body>
</html>